<template>
  <div>
    <!-- 会员储值余额页面 -->
    <van-nav-bar
      title="会员储值"
      left-arrow
      fixed
      @click.left.native="$router.go(-1)"
    >
    </van-nav-bar>
    <!-- 顶部背景图片 -->
    <div class="td2">
      <van-image lazy-load src="/imgs/balance/balance.jpg">
        <template v-slot:loading>
          <van-loading type="circular" size="20" />
        </template>
      </van-image>
    </div>
    <!-- 储值卡所有种类 -->
    <div class="box">
      <div class="card" v-for="item in balance">
        <!-- 左侧左上角图标 -->
        <div class="icon">
          <img :src="banURL + item.icon" alt="" />
        </div>
        <!-- 左侧内容部分 -->
        <div class="money">
          <div>
            储蓄<span>{{ item.money }}</span
            >元
          </div>
        </div>
        <!-- 右侧内容部分 -->
        <div class="discount">
          <div>
            赠<span>{{ item.title }}</span>
          </div>
          <van-cell is-link title="使用说明" @click="explain = true" />
        </div>
      </div>
    </div>
    <!-- 说明书 -->
    <van-action-sheet v-model="explain" title="使用说明">
      <div class="content">
        <div>1.储蓄余额不可提现、不计利息、不可转增；</div>
        <div>
          2.储蓄余额可在奈雪的茶大陆门店、奈雪梦工厂出示会员码，或在[奈雪点单]小程序使用；
        </div>
        <div>
          3.特别注意:<br />
          储蓄赠券有效期为30天，可在奈雪大陆门店(除机场店外)出示会员码或[奈雪点单]小程序兑换商品一件，限33元及以下商品，单个订单中购买多件商品折扣最低价格商品，请在有效期内核销，逾期无效；
        </div>
      </div>
    </van-action-sheet>
    <!-- 底部立即储值部分 -->
    <div class="agree">
      <div class="dd">
        <input type="checkbox" v-model="agree"/>
        <span>我已阅读并同意</span>
        <span>《奈雪会员储蓄协议》</span>
      </div>
      <van-button
        :disabled="!agree"
        type="primary"
        size="large"
        color="#A7D500"
        @click="recharge = true"
        round
        >立即储值</van-button
      >
    </div>
    <!-- 确认支付弹框 -->
    <van-overlay :show="recharge" @click="recharge = false" duration="1">
      <div class="wrapper" @click.stop>
        <div class="pay">
          <div>￥<span>300.00</span></div>
          <div>支付方式</div>
          <div>
            <img src="../assets/imgs/pay/weixin.png" />
            <span>微信</span>
          </div>
          <div>
            <img src="../assets/imgs/pay/ok.png" />
          </div>
          <div class="btn">
            <button>确认支付</button>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["banURL"]),
  },
  data() {
    return {
      explain: false, //说明书，用于遮罩
      balance: [], //接收接口获得到的存储卡类型数据
      agree: false, //是否已阅读，用户checkbox状态
      recharge: false,//确认支付，用于遮罩
    };
  },
  methods: {
    getBalance() {
      const url = "home/balance";
      this.axios.get(url).then((res) => {
        console.log("会员储蓄卡种类:", res);
        this.balance = res.data.data;
      });
    },
  },
  mounted() {
    this.getBalance();
  },
};
</script>

<style lang="scss" scoped>
//顶部背景图
.td2 {
  margin-top: 46px;
}
//储蓄券盒子容器
.box {
  padding: 4vw;
  background-color: #f1f2f3;
  margin-bottom: 25vw;
  //储蓄券固定样式
  .card {
    background-color: #fff;
    padding: 6vw 4vw 2vw;
    position: relative;
    overflow: hidden;
    margin-top: 2vw;
    // 左侧
    .money {
      width: 35%;
      float: left;
      padding: 4vw 0;
      text-align: center;
      font-size: 4vw;
      span {
        font-size: 5vw;
        font-weight: 600;
      }
    }
    // 右侧
    .discount {
      width: 50%;
      float: right;
      border-left: 2px solid #e2e5e7;
      padding: 2vw 5vw;
      font-size: 4vw;
      span {
        font-size: 5vw;
        font-weight: 600;
        margin-left: 2vw;
      }
      .van-cell__title {
        text-align: right;
        span {
          font-size: 3.5vw;
          color: #707275;
        }
      }
    }
    // 左侧左上角标识
    .icon {
      width: 20vw;
      position: absolute;
      left: 0;
      top: 0;
      img {
        width: 100%;
        display: block;
      }
    }
  }
}
// 说明书内容样式
.content {
  padding: 3vw 5vw;
  font-size: 4.5vw;
  color: #838487;
}
//底部立即储蓄部分
.agree {
  position: fixed;
  bottom: 0;
  width: 100vw;
  text-align: center;
  background-color: #f1f2f3;
  padding-bottom: 4vw;
  //会员储蓄协议
  .dd {
    margin-top: 2vw;
    span:nth-child(3) {
      color: #a7d500;
    }
  }
  // 按钮
  .van-button {
    width: 90%;
    margin-top: 4vw;
  }
}

//点击立即储值后弹框
.wrapper {
  .pay {
    width: 100%;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    padding: 6vw;
    box-sizing: border-box;
    div:nth-child(1) {
      text-align: center;
      span {
        font-size: 8vw;
      }
    }
    div:nth-child(2) {
      font-size: 5vw;
    }
    div:nth-child(3) {
      float: left;
      width: 16vw;
      margin-top: 3vw;
      img {
        width: 50%;
        vertical-align: middle;
      }
      span {
        font-size: 4vw;
      }
    }
    div:nth-child(4) {
      margin-top: 3vw;
      float: right;
      width: 8vw;
      img {
        display: block;
        width: 100%;
      }
    }
    .btn {
      margin-top: 15vw;
      text-align: center;
      button {
        padding: 4vw 20vw;
        color: #fff;
        background-color: #a7d500;
        border: 0;
        border-radius: 10vw;
      }
    }
  }
}
</style>